<template>
  <div class="footerTab bd-top-1">
    <!--<div class="tab-item">-->
      <!--<router-link tag="div" to='/home'>-->
        <!--<i></i>-->
        <!--<span>首页</span>-->
      <!--</router-link>-->
    <!--</div>-->
    <div class="tab-item">
      <router-link tag="div" to='/card'>
        <i></i>
        <span>我要办卡</span>
      </router-link>
    </div>
    <div class="tab-item">
      <router-link tag="div" to='/loans'>
        <i></i>
        <span>贷款</span>
      </router-link>
    </div>
    <div class="tab-item">
      <router-link tag="div" to='/mine'>
        <i></i>
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    // name: 'footertab'
  }
</script>

<style lang="scss" scoped>
  .footerTab {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1rem;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1rem;
    z-index: 888;
    /*border-top: 1px #e6e6e6 solid;*/
    background: #fff;
    .tab-item {
      width: 33.33%;
      height: 100%;
      float: left;
      text-align: center;
      position: relative;
      div {
        color: #000;
        width: 100%;
        height: 100%;
      }
      i {
        display: block;
        width: .42rem;
        height: .4rem;
        font-size: .4rem;
        line-height: normal;
        margin: 7px auto 0 auto;
      }
      span {
        font-size: .2rem;
        line-height: .5rem;
        display: block;
      }
    }
  }
  /*图标*/
  .footerTab .tab-item:nth-child(1) div.router-link-active i {
    background: url("../../assets/imgs/tabBar/icon-home-yes.png") no-repeat center;
    background-size: .38rem .38rem;
  }
  .footerTab .tab-item:nth-child(2) div.router-link-active i {
    background: url("../../assets/imgs/tabBar/icon-card-yes.png") no-repeat center;
    background-size: .4rem .3rem;
  }
  .footerTab .tab-item:nth-child(3) div.router-link-active i {
    background: url("../../assets/imgs/tabBar/icon-indent-yes.png") no-repeat center;
    background-size: .3rem .4rem;
  }
  .footerTab .tab-item:nth-child(4) div.router-link-active i {
    background: url("../../assets/imgs/tabBar/icon-mine-yes.png") no-repeat center;
    background-size: .42rem .4rem;
  }
  .footerTab .tab-item:nth-child(1) div i {
    background: url("../../assets/imgs/tabBar/icon-home-no.png") no-repeat center;
    background-size: .4rem .4rem;
  }
  .footerTab .tab-item:nth-child(2) div i {
    background: url("../../assets/imgs/tabBar/icon-card-no.png") no-repeat center;
    background-size: .4rem .3rem;
  }
  .footerTab .tab-item:nth-child(3) div i {
    background: url("../../assets/imgs/tabBar/icon-indent-no.png") no-repeat center;
    background-size: .3rem .4rem;
  }
  .footerTab .tab-item:nth-child(4) div i {
    background: url("../../assets/imgs/tabBar/icon-mine-no.png") no-repeat center;
    background-size: .42rem .4rem;
  }
  /*文字颜色*/
  .footerTab .tab-item div.router-link-active span {
    color: #dd001b;
  }
  .footerTab .tab-item div span {
    color: #999999;
  }
</style>
